<template>
  <div style="min-height: 600px">
    <ul v-if="listData.length">
      <li
        style="padding: 20px;"
        :class="index !== listData.length - 1 ? 'classify-li' : ''"
        v-for="(item,index) in listData"
        :key="index"
      >
        <el-row>
          <el-col :span="12">
            <p class="mb0">
              项目名称：
              <span>{{ item.evalItemName }} {{ item.extraItem === 1 ? '（追加）' : null }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <span>
              事件数：
              <i>{{ (item.evalTaskEventVOList && item.evalTaskEventVOList.length) ? item.evalTaskEventVOList.length : 0 }}</i>个
            </span>
            <template v-if="parentRow.progress >= 0">
              <el-button type="text" @click="handleDetail(item)">详情</el-button>
              <el-divider direction="vertical" />
              <el-button type="text" @click="handleDetail(item, 'history')">历史</el-button>
              <template v-if="row.taskState !== 2 && parentRow.evalMode !== 2">
                <el-divider direction="vertical" />
                <el-button type="text" @click="handleAdd(item)">新增</el-button>
              </template>
            </template>
          </el-col>
          <el-col :span="12">
            <p class="overWord">
              项目内容：
              <span>{{ item.evalItemContent }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <p>
              考核标准：
              <span>{{ item.standard }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <p class="mb0">
              <span>{{ item.rewardOrientation === 1 ? '项目分值：' : '项目金额：' }}</span>
              <span>{{ item.rewardStandard }}{{ item.rewardOrientation === 1 ? '分' : '元' }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <p class="mb0" v-if="item.rewardOrientation === 1">
              得分：
              <span>{{ item.itemScore }}</span>分
              <!-- 
                1. 事件数大于0 不显示 evalTaskEventVOList
                2. 点击一次赋值之后不再显示
                3. 状态为已提交 不显示 taskState
                4. 考评形式为巡查 不显示 evalMode
              -->
              <el-button
                size="mini"
                class="ml10"
                @click="handleSure(item)"
                v-if="item.evalTaskEventVOList.length < 1 && item.itemScore < item.rewardStandard && row.taskState !== 2 && parentRow.evalMode !== 2"
              >确定</el-button>
              <el-button
                size="mini"
                type="danger"
                v-show="item.extraItem === 1 && parentRow.evalMode !== 2"
                @click="handleDeleteItem(item)"
              >删除</el-button>
            </p>
            <p class="mb0" v-else>
              金额：
              <span>{{ item.itemMoney }}</span>元
              <el-button
                size="mini"
                class="ml10"
                @click="handleSure(item)"
                v-if="item.evalTaskEventVOList.length < 1 && item.itemMoney < item.rewardStandard && row.taskState !== 2 && parentRow.evalMode !== 2"
              >确定</el-button>
            </p>
          </el-col>
        </el-row>
      </li>
    </ul>
    <template v-else>
      <empty-comp ref="emptyComp" />
    </template>
  </div>
</template>

<script>
// import EmptyComp from '@/components'
import { updateDetailedItem, detailedItemDelete } from '@/api/eval'
import { openNotification, getSession } from '@/utils/util'

export default {
  props: {
    list: {
      type: Array
    }
  },
  watch: {
    list: {
      handler(n, o) {
        this.listData = [...n]
      }
    }
  },
  created() {
    console.log('list', this.list)

    this.listData = [...this.list]
  },
  computed: {},
  data() {
    return {
      listData: [],
      type: this.$route.params.type || getSession('startTestType'),
      row: this.$route.params.row || getSession('startTestRow'),
      parentRow: getSession('evalListRow')
    }
  },
  methods: {
    // 删除追加项
    handleDeleteItem(item) {
      console.log('item', item)
      const { evalDetailedItemId, evalItemId } = item
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${item.evalItemName}]这条追加记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await detailedItemDelete({ evalDetailedItemId, evalItemId })
          openNotification('success', '删除成功')
          _this.$emit('refresh')
          // const index = _this.listData.findIndex(v => v.evalDetailedItemId === item.evalDetailedItemId)
          // _this.listData.splice(index, 1)
          // _this.init()
        }
      })
    },
    async handleSure(item) {
      // console.log('item', item)
      const res = await updateDetailedItem(item.evalDetailedItemId)
      console.log('res', res)
      if (res.state === '000000') {
        if (item.rewardOrientation === 1) {
          this.$set(item, 'itemScore', item.rewardStandard)
        } else {
          this.$set(item, 'itemMoney', item.rewardStandard)
        }
      }
    },
    handleAdd(item) {
      this.$router.push({
        name: 'evaluateStartCreateTest',
        params: { item }
      })
    },
    handleDetail(item, name = 'detail') {
      this.$router.push({
        name: 'evaluateDetail',
        params: { item, name }
      })
    }
  }
}
</script>

<style scoped>
.classify-li {
  border-bottom: 1px solid #ccc;
}
.overWord {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
